<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute,useRouter,RouterLink, RouterView } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const bookData = ref()

onMounted(async ()=>{
    try{
        const res = await axios.get(`http://localhost:8080/book/${route.query.id}`)
        console.log(res)
        bookData.value = res.data
    }catch(error){
        console.error(error)
    }
    
})
// // 获取书籍详情
// const fetchBookDetail = async () => {
//     const id = route.query.id as String
//     const res = await axios.get(`http://localhost:8080/book/${id}`)
//     bookData.value = res.data || {}
// }
</script>

<template>
    <div class="book-detail-container" v-if="bookData">
      <h1>书本详情</h1>
          <span class="label">书本编号：</span>
          <span>{{ bookData.id }}</span><br>
          <span class="label">书本名称：</span>
          <span>{{ bookData.name }}</span><br>
          <span class="label">书本分类：</span>
          <span>{{ bookData.type }}</span><br>
          <span class="label">书本信息：</span>
          <span>{{ bookData.information }}</span><br>
    </div>
  </template>

<style scoped>

</style>
